<template>
	<view>
		<view class="top">
			<text class="t1">~请选择领取想参加的任务~</text>
			<text class="t2">你的选择是</text>
		</view>
		<view class="center box">
			<view class="item" @click="itemClick(1)">
				<image src="/static/task/img_01.png" mode="widthFix" class="img"></image>
				<text class="t">活动周期一天，每天早上九点打卡一次</text>
				<text class="btn" v-if="taskInfo.pass1==1">查看任务</text>
				<text class="btn" v-else>领取任务</text>
				<!-- <text class="btn" @click="goTaskDetail(1)" v-if="task1Join">查看任务</text>
				<text class="btn" @click="showPop(1)" v-else>领取任务</text> -->
			</view>
			<view class="item" @click="itemClick(2)">
				<image src="/static/task/img_02.png" mode="widthFix" class="img"></image>
				<text class="t">活动周期一天，每天两小时内打卡十一次</text>
				<text class="btn" v-if="taskInfo.pass2==1">查看任务</text>
				<text class="btn" v-else>领取任务</text>
				<!-- <text class="btn" @click="goTaskDetail(2)" v-if="task2Join">查看任务</text>
				<text class="btn" @click="showPop(2)" v-else>领取任务</text> -->
			</view>
		</view>
		<view class="bottom box">
			<view class="item">
				<text class="t1">当月成功签到/次</text>
				<text class="t2">{{taskInfo.pass_sum}}</text>
			</view>
			<view class="item">
				<text class="t1">当月领取总奖励/元</text>
				<text class="t2">{{taskInfo.pass_price}}</text>
			</view>
		</view>
		<!-- <view class="box" @click="share">
			<image src="/static/task/img_03.png" mode="widthFix" class="btn-img"></image>
			<text class="btn-txt">邀请好友每天领券</text>
		</view> -->
		<view class="popup" @touchmove.stop.prevent v-if="popShow">
			<view class="mask" @click="showPop"></view>
			<view class="pop-cont">
				<view class="pop-top">
					<view class="l">
						<text>买推广券得收益</text>
						<image src="/static/task/icon_03.png" mode="widthFix" class="icon"></image>
					</view>
					<text class="r" @click="openRuler">规则</text>
				</view>
				<view class="pop-bottom">
					<view class="list">
						<!-- :class="'active':''" -->
						<view class="item" :style="{'background-image':couId==t.id ? 'url(/static/images/taskActiveBg.png)' : ''}" v-for="(t,i) in coupons"
						 :key="i" @click="chooseCou(t)">
							<image v-if="i == 0" src="/static/task/img_18.png" mode="widthFix" class="img" @click="openShare"></image>
							<image v-else src="/static/task/img_15.png" mode="widthFix" class="img"></image>
							<text class="price"><text>&yen;</text>{{t.price}}</text>
						</view>
						<block v-if="coupons.length%3==2">
							<view class="item" style="visibility:hidden" v-for="(t,i) in coupons.length%3-1" :key="i">
								<image src="/static/task/img_15.png" mode="widthFix" class="img"></image>
							</view>
						</block>
					</view>
					<!-- <input type="number" v-model="intNum" class="ipt" placeholder="输入金额..." /> -->
					<view class="btns">
						<image src="/static/task/img_16.png" mode="widthFix" class="btn-img" @click="openShare"></image>
						<image src="/static/task/img_17.png" mode="widthFix" class="btn-img" @click="joinPass"></image>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="rule_main">
				<scroll-view scroll-y="true" class="ruler-scroll">
					<view class="ruller-cont" v-html="taskInfo.pass1_rule" v-if="taskId==1"></view>
					<view class="ruller-cont" v-html="taskInfo.pass2_rule" v-if="taskId==2"></view>
				</scroll-view>
				<view class="rule_btn" @tap="closeRuler">
					<image class="btn_img" src="../../static/images/understandRule.png" mode=""></image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="sharePopup">
			<view class="share_main">
				<image @tap="closeShare" class="share_close" src="../../static/images/shareClose.png" mode=""></image>
				<image @tap="share" class="share_btn" src="../../static/images/shareBtn.png" mode=""></image>
			</view>
		</uni-popup>
		
		<uni-popup ref="sharePopupSuss">
			<view class="share_mains">
				<image @tap="$refs.sharePopupSuss.close()" class="share_close" src="../../static/images/shareClose.png" mode=""></image>
				<image @tap="goTaskDetail(2)" class="share_btn" src="../../static/images/shareBtn.png" mode=""></image>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				popShow: false,
				couId: 0,
				intNum: '',
				coupons: [],
				taskId: 0,
				task1Join: false,
				task2Join: false,
				taskInfo: ''
			};
		},
		onLoad() {
			// this.getPassDetail(1);
			// this.getPassDetail(2);
			this.getPassStatistics();
			// this.getList();
			this.getTicketList();
		},
		onShow() {
			// this.getPassDetail(1);
			// this.getPassDetail(2);
			this.getPassStatistics();
		},
		methods: {
			// 开启规则
			openShare() {
				this.$refs.sharePopup.open();
			},
			// 关闭规则
			closeShare() {
				this.$refs.sharePopup.close();
			},
			// 分享朋友圈
			share() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "【相聚一刻】你的好友为你推荐了一批同城的优质用户，他们正在找人脉、找合作，找對象。想要賺錢的，快来下載並領取新人紅包，看看哪一位朋友你認識的?在應用商城搜索【相聚一刻】 或點 http://d.firim.top/173c ",
					success: function(res) {
						_this.getShare();
					
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						// console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 分享后领取推广券
			getShare() {
				let that = this
				this.$utils.request("/api/share", '', function(res) {
					if(res.code == 200) {
						that.$refs.sharePopupSuss.open();
						that.closeShare()
					}else{
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			// 开启规则
			openRuler() {
				this.$refs.popup.open();
			},
			// 关闭规则
			closeRuler() {
				this.$refs.popup.close();
			},
			// 点击任务卡片
			itemClick(i) {
				if (i == 1) {
					// 任务1是否参加
					if (this.taskInfo.pass1 == 1) {
						// 已参加进入详情页
						this.goTaskDetail(1);
					} else {
						// 未参加弹出选择卷报名领取任务
						this.showPop(1);
					}
				} else if (i == 2) {
					// 任务2是否参加
					if (this.taskInfo.pass2 == 1) {
						// 已参加进入详情页
						this.goTaskDetail(2);
					} else {
						// 未参加弹出选择卷报名领取任务
						this.showPop(2);
					}
				}
			},
			// 获取任务统计
			getPassStatistics() {
				let _this = this;
				this.$utils.request("/api/clock/getPassStatistics", '', function(res) {
					if (res.code == 200) {
						_this.taskInfo = res.data;
					}
				})
			},
			// 获取详情查看是否报名
			getPassDetail(id) {
				let _this = this;
				this.$utils.request("/api/clock/getPassDetail", {
					id
				}, function(res) {
					if (res.code == 200) {
						if (res.data.is_join == 1) {
							if (id == 1) {
								_this.task1Join = true;
							} else {
								_this.task2Join = true;
							}
						}
					}
				})
			},
			// 报名活动
			joinPass() {
				let _this = this;
				if (_this.couId == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择券'
					})
					return;
				}
				this.$utils.postrequest("/api/clock/joinPass", {
					pass_id: _this.taskId,
					ticket_id: _this.couId
				}, function(res) {
					if (res.code == 200) {
						_this.showPop();
						if (_this.taskId == 1) {
							_this.goTaskDetail(1)
						} else {
							_this.goTaskDetail(2)
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
						if (res.code == 303) {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/myBack/rechargeBalance/rechargeBalance'
								})
							}, 1000)
						}
					}
				})
			},
			// 获取列表
			getList() {
				let _this = this;
				this.$utils.request("/api/clock/getPassList", '', function(res) {
					if (res.code == 200) {

					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			// 获取卷的列表
			getTicketList() {
				let _this = this;
				this.$utils.request("/api/ticket/getTicketList", '', function(res) {
					if (res.code == 200) {
						_this.coupons = res.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			showPop(i) {
				if (i) {
					this.taskId = i;
				}
				this.couId = 0;
				this.popShow = !this.popShow;
			},
			chooseCou(t) {
				this.couId = t.id;
			},
			goTaskDetail(s) {
				if (s == 1) {
					uni.navigateTo({
						url: '/pages/active/everydayTask'
					})
				} else {
					uni.navigateTo({
						url: '/pages/active/twoHoursTask'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #1a1c20;
	}

	.top {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding-top: 160rpx;
		margin-bottom: 56rpx;

		.t1 {
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			color: #FFFFFF;
			line-height: 38rpx;
		}

		.t2 {
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			color: #C1C1C1;
			line-height: 38rpx;
			margin-top: 24rpx;
		}
	}

	.box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		position: relative;
	}

	.center {
		width: 100%;

		.item+.item {
			margin-top: 46rpx;
		}

		.item {
			position: relative;
			width: 100%;

			.img {
				display: block;
				width: 100%;
			}

			.t {
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 26rpx;
				position: absolute;
				left: 240rpx;
				bottom: 104rpx;
			}

			.btn {
				width: 123rpx;
				height: 42rpx;
				background: #76C625;
				border-radius: 21rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 42rpx;
				position: absolute;
				right: 38rpx;
				bottom: 36rpx;
			}
		}
	}

	.bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 60rpx 0;

		.item {
			width: 331rpx;
			height: 134rpx;
			background: #3b2c51;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.t1 {
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 26rpx;
			}

			.t2 {
				font-size: 48rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 48rpx;
				margin-top: 20rpx;
			}
		}
	}

	.btn-img {
		width: 100%;
		display: block;
	}

	.btn-txt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: auto;
		font-size: 40rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		line-height: 150rpx;
		text-align: center;
	}

	.popup {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, .5);
		}

		.pop-cont {
			width: 100%;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			overflow: hidden;
			position: relative;
			z-index: 2;

			.pop-top {
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #EEEEEE;

				.l {
					font-size: 36rpx;
					font-family: PingFang SC;
					color: #333333;
					line-height: 36rpx;
					display: flex;
					align-items: center;

					.icon {
						width: 38rpx;
						margin-left: 12rpx;
					}
				}

				.r {
					width: 111rpx;
					height: 56rpx;
					border: 1px solid #825CEE;
					border-radius: 28rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #825CEE;
				}
			}

			.pop-bottom {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;

				.list {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					justify-items: center;
					align-items: center;
					// flex-wrap: wrap;
					// justify-content: space-between;

					.item {
						width: 233rpx;
						box-sizing: border-box;
						padding: 4rpx;
						border: 1px dashed #FFFFFF;
						position: relative;
						margin-bottom: 20rpx;
						height: 154upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-size: 100% 100%;

						&.active {
							border: 1px dashed #AF67FD;
						}

						.img {
							width: 213upx;
							height: 133upx;
							display: block;
						}

						.price {
							position: absolute;
							bottom: 10rpx;
							right: 20rpx;
							font-size: 36rpx;
							font-family: Adobe Heiti Std;
							color: #FFFFFF;
							line-height: 36rpx;

							text {
								font-size: 24rpx;
							}
						}
					}
				}

				.ipt {
					width: 100%;
					height: 118rpx;
					background: #EEEEEE;
					border-radius: 15rpx;
					box-sizing: border-box;
					padding: 42rpx 35rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					line-height: 36rpx;
					margin-bottom: 50rpx;

					&.input-placeholde {
						color: #8F8989;
					}
				}

				.btns {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn-img {
						width: 327rpx;
					}
				}
			}
		}
	}

	.ruler-scroll {
		// width: 505rpx;
		// height: 417rpx;
		// background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 400rpx 60rpx 30rpx 60rpx;

		/deep/ .ruller-cont {
			height: 417upx;
		}
	}

	.rule_main {
		background: url(../../static/images/ruleBg.png) no-repeat;
		background-size: 100% 100%;
		width: 602upx;
		height: 1031upx;

		.rule_btn {
			margin: 0 auto;
			width: 404upx;

			.btn_img {
				width: 404upx;
				height: 107upx;
			}
		}
	}

	.share_main {
		background: url(../../static/images/shareBg.png) no-repeat;
		background-size: 100% 100%;
		width: 602upx;
		height: 709upx;
		position: relative;

		.share_close {
			position: absolute;
			right: 19upx;
			top: 16upx;
			width: 88upx;
			height: 89upx;
		}

		.share_btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 55upx;
			width: 328upx;
			height: 120upx;
		}
	}
	.share_mains {
		background: url(../../static/images/shareBgS.png) no-repeat;
		background-size: 100% 100%;
		width: 602upx;
		height: 709upx;
		position: relative;
	
		.share_close {
			position: absolute;
			right: 19upx;
			top: 16upx;
			width: 88upx;
			height: 89upx;
		}
	
		.share_btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 55upx;
			width: 328upx;
			height: 120upx;
		}
	}
</style>
